
<template>
  <div class="findNewcontentBox">
      <!-- <img class="banner" src="../../../assets/Image/dailyBanner.png" alt=""> -->


      <el-affix :offset="0" target=".findNewcontentBox">
          <div class="Navigation">
              <div @click="gotoscroll(item.id)" class="Navigation_Box" v-for="(item, index) in data" :key="index">{{
      item.name
}}</div>
          </div>
      </el-affix>
      <div class="itemListBox" :id="item.id" v-for="(item, index) in data" :key="index">
          <div class="indextitle">{{ item.name }}</div>
          <div class="indexItemBox">
              <div class="itemBox" v-for="jitem in item.list" :key="jitem.id"   @click="router.push({path:'/goodsDetail',query:{id: jitem.id}})">
                  <div class="topBox">
                      <img class="spBanner" :src="jitem.image" alt="">
                      <div class="lable">月销   {{ jitem.month_number }}</div>
                  </div> 
                  <div class="ItemcontentBox">
                      <div class="title">{{ jitem.product_name }}</div>
                      <div class="Price">
                          <div class="yesP"><span class="￥">￥</span>{{ jitem.price }}</div>
                          <div class="noP"><span style="color:#999999" class="￥">￥</span>{{ jitem.ot_price }}</div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps({
  data: {
      type: Array as () => Array<any>, //(string也可以是其他你自定义的接口)
      required: true,
      default: () => []
  }
});
console.log('====================================');
console.log(props);
console.log('====================================');

const gotoscroll = (id: number) => {
  let ac = document.getElementById(id + '');
  if (ac !== null) {
      ac.scrollIntoView({ block: "center", behavior: "smooth" });
  }
}


</script>


<style scoped lang="less">
.findNewcontentBox {
  max-width: 1920px;
  margin: 0 auto;
  background: #E65D39;
  background-size: 100% 100%;
  padding: 40px 224px 50px;
  box-sizing: border-box;
  position: relative;

  // display: flex;
  // flex-wrap: wrap;
  // justify-content: space-between;
  .Navigation {
      margin-left: -224px;
      position: absolute;
      top: 0px;

      .Navigation_Box:nth-child(2n) {
          background: #F26D47;
          width: 224px;
          height: 54px;
          font-size: 20px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
          line-height: 54px;
          text-align: center;
      }
  }

  .itemBox {
      width: 282px;
      height: 410px;
      background: #FFFFFF;
      z-index: 100;
      margin-bottom: 20px;
      margin-right: 10px;

      .topBox {
          width: 282px;
          height: 282px;
          position: relative;

          .spBanner {
              position: absolute;
              top: 0;
              width: 100%;
              height: 100%;
          }

          .lable {
              position: absolute;
              left: 0;
              bottom: 0;
              padding: 5px 28px 5px 10px;
              font-size: 16px;
              background: #DD2131;
              border-radius: 0px 18px 0px 0px;
              opacity: 0.3;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #FFFFFF;
              z-index: 10;
          }
      }

      .ItemcontentBox {
          padding: 10px;
          box-sizing: border-box;
          // display: flex;


          .title {
              height: 40px;
              width: 240px;
              font-size: 20px;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #333333;
              line-height: 40px;
              overflow: hidden; //超出隐藏
              white-space: nowrap; //不折行
              text-overflow: ellipsis;
          }

          .Price {
              width: 100%;
              height: 30px;
              display: flex;
              line-height: 40px;
              margin-top: 25px;

              .￥ {
                  font-size: 16px;
                  font-family: PingFang SC-Medium, PingFang SC;
                  font-weight: 500;
                  color: #DD2131;
              }

              .yesP {
                  font-size: 22px;
                  font-family: PingFang SC-Medium, PingFang SC;
                  font-weight: 500;
                  color: #DD2131;
                  margin-right: 10px;
              }

              .noP {
                  font-size: 19px;
                  font-family: PingFang SC-Medium, PingFang SC;
                  font-weight: 500;
                  color: #999999;
                  text-decoration: line-through;
              }
          }
      }
  }

  .itemBox:nth-child(5n) {
      margin-right: 0;
  }

  .banner {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }
}

.itemListBox {
  .indexItemBox {
      display: flex;
      flex-wrap: wrap;
  }

}

.indextitle {
  font-size: 32px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  text-align: center;
  margin: 40px 0;
}

.Navigation_Box {
  width: 224px;
  height: 54px;
  background: #E2441A;
  font-size: 20px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 54px;
  text-align: center;
}
</style>
